#{extends 'main.html' /}
#{set title:'Create event' /}

<h1>Create a new event</h1>
<br>
<div id=styledForm>
#{form @Events.createEvent(), enctype:'multipart/form-data'}
    <fieldset>              
        <legend>Event details</legend>  

        <div class="field">     
            <label for="name">*Event name</label>                    
            <input id="name" type="text" name="name" size="30" value="${flash.name}" class="#{errorClass 'name' /}" /> 
            <span class="error">#{error 'name' /}</span>
       	</div>
        <div class="field">
            <label for="description">Description</label>                  
            <textarea id="description" type="text" name="description" size="30" value="${flash.description}" class="#{errorClass 'description' /}"></textarea> 
            <span class="error">#{error 'description' /}</span>
        </div>          
        
        <div class="field">
        	<div class="field">
        	<label for="startDateString">*Start date (yyyy-mm-dd)</label>
        	<input id="startDateString" type="date" name="startDateString" size="30" value="${flash.startDateString}" class="#{errorClass 'startDateString' /}"/>
			<span class="error">#{error 'startDateString' /}</span>
			<span class="error">${flash.startDateError}</span><br>
			</div> 
        </div>
        
        <div class="field">
        	<div class="field">
        	<label for="endDateString">End date (yyyy-mm-dd)</label>
        	<input id="endDateString" type="date" name="endDateString" size="30" value="${flash.endDateString}" class="#{errorClass 'endDateString' /}"/>
			<span class="error">#{error 'endDateString' /}</span>
			</div> 
        </div>
        
        <div class="field">
        	<label for="stars">*Category</label>
        	#{select 'category', items:categories} 
			#{/select}
        </div>         
    </fieldset>
    
    <fieldset>              
        <legend>Event location</legend>      
                
        <div class="field">
        	<label for="city">*City</label>                     
            <input id="city" type="text" name="city" size="15" value="${flash.city}" class="#{errorClass 'city' /}" /> 
            <span class="error">#{error 'city' /}</span>
        </div>  
        
        <div class="field">     
            <label for="street">Street</label>                     
            <input id="street" type="text" name="street" size="30" value="${flash.street}" class="#{errorClass 'street' /}" /> 
            <span class="error">#{error 'street' /}</span>
        </div>            
        <div class="field">   
            <label for="streetNumber">Number</label>                     
            <input id="streetNumber" type="text" name="streetNumber" size="3" value="${flash.streetNumber}" class="#{errorClass 'streetNumber' /}" /> 
            <span class="error">#{error 'streetNumber' /}</span>
        </div>    
        
        <div class="field">
            <label for="zipcode">Zipcode</label>                     
            <input id="zipcode" type="text" name="zipcode" size="6" value="${flash.zipcode}" class="#{errorClass 'zipcode' /}" /> 
            <span class="error">#{error 'zipcode' /}</span>
        </div>   
        
        <div class="field">
        	<label for="picture">Image</label>
        	<input type="file" name="photo">
   			<span class="error">#{error 'picture' /}</span>
        </div>        
    </fieldset>   
    <span class="error">${flash.existentError}</span><br>
    <span class="error">${flash.dummyError}</span><br>
    * = mandatory fields <br> 
    <input type="submit" class="submit" value=" create event " />
    
#{/form}
</div>